<template>
  <el-dialog
      v-model="dialogVisible"
      title="通知内容"
      width="30%"
  >
    <span>{{ details.sendInfo }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-container>
    <el-header class="auditor_header">
      系统通知
    </el-header>
    <el-main>
      <el-dialog v-model="centerDialogVisible" title="通知详情" width="60%" center>
    <span>
       <el-row>
    <el-col :span="4">用户名</el-col>
    <el-col :span="20">{{informData[index-1].sysInformsId}}</el-col>
  </el-row>
      <el-row>
    <el-col :span="4">发送方</el-col>
    <el-col :span="20">{{informData[index-1].senderUsername}}</el-col>
  </el-row>
         <el-row>
    <el-col :span="4">接收方</el-col>
    <el-col :span="20">{{informData[index-1].receiverUsername}}</el-col>
  </el-row>
      <el-row>
        <el-col :span="4">通知时间</el-col>
    <el-col :span="20">{{informData[index-1].sendDate}}</el-col>
      </el-row>
      <el-row>
      <el-col :span="4">通知内容</el-col>
    <el-col :span="20">{{informData[index-1].sendInfo}}</el-col>
      </el-row>
    </span>
        <template #footer>
      <span class="dialog-footer">
<!--        <el-button @click="centerDialogVisible = false">C</el-button>-->
        <el-button type="primary" @click="centerDialogVisible = false">
          返回
        </el-button>
      </span>
        </template>
      </el-dialog>
      <el-table :data="informData" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="senderUsername" label="发送方手机号"/>
        <el-table-column prop="receiverUsername" label="接收方手机号"/>
        <el-table-column prop="sendDate" label="发送时间"/>
        <el-table-column  label="操作">
          <template v-slot:default="scope">
            <el-button  type="primary" @click="centerDialogVisible=true,detailedInform(scope.row.id)"
            >查看详情</el-button>
            <el-popconfirm title="确定要删除吗?" @confirm="deleteInform(scope.row.sysInformsId)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "driverInform",
  mounted() {
    let userjson=sessionStorage.getItem('user')
    let user=JSON.parse(userjson)
    axios({
      method: 'post',
      url: '/api/sys_informs/getSysInfos',
      data: {
        username: user.username,
      },
      params: {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      },
    })
        .then((res)=>{
          this.informData=res.data.data.records
          for(var i=0;i<res.data.data.records.length;i++){
            this.informData[i].id=i+1;
          }
          this.total=res.data.data.records.length
          this.currentPage=res.data.data.current
          this.pageSize=res.data.data.size
        });
  },
  data(){
    return{
      total: 1,
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      centerDialogVisible:false,
      informData:[
      ],
      details:null,
      index:0,

    }
  },
  methods:{
    refresh:function (){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/sys_informs/getSysInfos',
        data: {
          username: user.username,
        },
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        },
      })
      .then((res)=>{
        this.informData=res.data.data.records
        for(var i=0;i<res.data.data.records.length;i++){
          this.informData[i].id=i+1;
        }
        this.total=res.data.data.records.length
        this.currentPage=res.data.data.current
        this.pageSize=res.data.data.size
      });
    },
    detailedInform:function (a){
      //查看详细的通知
      // eslint-disable-next-line no-unused-vars
          this.index= a
          this.centerDialogVisible=true
      // axios({
      //   method: 'post',
      //   url: '/api/sys_informs/getDeepInfo',
      //   data: {
      //     sysInformsId: a,
      //   },
      // })
      //     .then((res)=>{
      //       if(res.data.success===true){//获取数据成功
      //         this.details=res.data.data
      //
      //         //弹窗
      //       }else{
      //         // alert('该通知出错，可能已被删除')
      //         ElMessage.error('该通知出错，可能已被删除')
      //       }
      //     });
    },
    deleteInform:function (a){
      //删除通知
      axios({
        method: 'post',
        url: '/api/sys_informs/deleteInfo',
        data: {
          sysInformsId: a,
        },
      })
          .then((res)=>{
            if(res.data.success===true){//删除成功
              // alert("删除成功")
              ElMessage.success('删除成功')
              // this.informData=res.data.data.records
              // for(var i=0;i<res.data.data.records.length;i++){
              //   this.informData[i].id=i+1;
              // }
              // this.total=res.data.data.total
              this.refresh()
            }else{
              // alert('删除失败')
              ElMessage.error('删除失败')
            }
          });
    },
    handleSizeChange:function (){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/sys_informs/getSysInfos',
        data: {
          username: user.username,
        },
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        },
      })
          .then((res)=>{
            this.informData=res.data.data.records
            for(var i=0;i<res.data.data.records.length;i++){
              this.informData[i].id=i+1;
            }
            this.total=res.data.data.records.length
          });
    },
    handleCurrentChange:function (){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/sys_informs/getSysInfos',
        data: {
          username: user.username,
        },
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        },
      })
          .then((res)=>{
            this.informData=res.data.data.records
            for(var i=0;i<res.data.data.records.length;i++){
              this.informData[i].id=i+1;
            }
            this.total=res.data.data.records.length
          });
    }
  }
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-pagination{
  justify-content: center !important;
}
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{
  text-align: center;
  position: relative;
  bottom: 0px;
}
</style>